<template>
	<div id="basicInformation">
		<el-row style="line-height: 40px">
			<el-col :span="4" class="backgroundTitelBox">
				风控信息
			</el-col>
			<el-col :span="2" class="refrestBox">
				<el-button
					type="primary"
					icon="el-icon-refresh"
					@click="refresh"
				>
					{{ $t('common.refresh') }}
				</el-button>
			</el-col>
			<el-col :span="16" class="btngroup">
				<el-button
					v-if="
						outlineInfoList.entryAuthority !== 0 &&
							hasPermission('201023')
					"
					type="primary"
					@click="editFn($t('common.risk_control_level'))"
				>
					{{ $t('common.risk_control_level') }}
				</el-button>

				<el-button
					v-if="
						outlineInfoList.entryAuthority !== 0 &&
							hasPermission('201024')
					"
					type="primary"
					@click="editFn($t('agent.agent_label'))"
				>
					{{ $t('agent.agent_label') }}
				</el-button>
				<el-button
					v-if="
						outlineInfoList.entryAuthority !== 0 &&
							hasPermission('201025')
					"
					type="primary"
					@click="editFn($t('agent.account_remark'))"
				>
					风控备注
				</el-button>
			</el-col>
		</el-row>
		<div class="titelBox">{{ $t('agent.summary_info') }}</div>
		<el-row class="msgList">
			<el-col :span="6">
				{{ $t('common.risk_control_level') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ outlineInfoList.windControlName || '-' }}
				</span>
			</el-col>

			<el-col :span="6">
				{{ $t('agent.agent_label') }}：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ outlineInfoList.labelName || '-' }}
				</span>
			</el-col>

			<el-col :span="6">
				风控状态：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{
						netAssetsWindStatusMap[
							outlineInfoList.netAssetsWindStatus
						] || '-'
					}}
				</span>
			</el-col>
			<el-col>
				风控备注：
				<i v-if="activeL" class="el-icon-loading"></i>
				<span v-else>
					{{ remark || '-' }}
				</span>
			</el-col>
		</el-row>
		<el-divider></el-divider>
		<div class="titelBox">{{ $t('agent.remark_info') }}</div>
		<div style="width: 100%">
			<el-table
				border
				size="mini"
				class="small-size-table"
				:data="tableList"
				:header-row-style="{ height: '24px', lineHeight: '24px' }"
				style="margin-top: 10px; z-index: 0"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					type="index"
					:label="$t('common.serial_number')"
				></el-table-column>
				<el-table-column
					prop="createDt"
					align="center"
					:label="$t('agent.update_time')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="$t('agent.remark_info')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operator"
					align="center"
					:label="$t('agent.remark_account')"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.operator || '-' }}</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="page"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				style="float: right; padding-top: 10px"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
			<div class="clear"></div>
		</div>
		<el-dialog
			:title="moduleBox"
			:visible.sync="editVisible"
			:before-close="closeFormDialog"
			width="620px"
		>
			<!-- 风控层级 -->
			<el-form ref="editForm" :model="editData" label-width="auto">
				<el-form-item
					v-if="moduleBox === $t('common.risk_control_level')"
					:label="$t('common.risk_control_level') + '：'"
					prop="windControlId"
					:rules="[
						{
							required: true,
							message: $t('agent.rule_select_tip_win_level'),
							trigger: 'blur'
						}
					]"
				>
					<el-select
						v-model="editData.windControlId"
						:placeholder="$t('common.please_choose')"
						@change="changeWindControlId"
					>
						<el-option
							v-for="item in riskLevelList"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item
					v-if="moduleBox === $t('agent.agent_label')"
					:label="$t('agent.agent_label') + '：'"
					prop="labelId"
					:rules="[
						{
							required: true,
							message: $t('agent.rule_select_tip_agent_label'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="editData.labelId"
						:placeholder="$t('common.please_choose')"
						@change="changeLabelId"
					>
						<el-option
							v-for="item in memberLabelList"
							:key="item.id"
							:label="item.labelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="titel"
					prop="remark"
					:class="
						moduleBox === $t('agent.forced_edit_contract_effect')
							? 'maxWidth'
							: ''
					"
					:rules="[
						{
							required: true,
							message: $t('agent.rule_input_tip_remark'),
							trigger: 'blur'
						},
						{
							min: 2,
							max: 500,
							message: $t('agent.rule_length_tip2-500'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="editData.remark"
						:maxlength="500"
						show-word-limit
						type="textarea"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFormDialog">
					{{ $t('agent.cancel') }}
				</el-button>
				<el-button type="primary" @click="submitEdit">
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		outlineInfo: { type: Object, default: () => ({}) },
		remarksTableData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			tableList: [],
			examineFlag: [],
			outlineInfoList: {},
			titel: '',
			editData: {
				parentProxyName: '',
				windControlId: '',
				labelId: '',
				mandatoryContract: '',
				entryAuthority: '1',
				creditLevel: '',
				maxLevel: '',
				sharingPolicyId: '',
				remark: '',
				merchantId: '',
				playerToProxy: false,
				crossOptLevel: false
			},
			memberLabelList: [],
			riskLevelList: [],
			moduleBox: '',
			editVisible: false,
			page: 1,
			size: 100,
			remark: undefined
		}
	},
	computed: {
		accountStatusType() {
			return this.globalDics.accountStatusType2 || []
		},
		entrAuthorityType() {
			return this.globalDics.entrAuthorityType || []
		},
		appIdArr() {
			return this.globalDics.appId || []
		},
		netAssetsWindStatusMap() {
			return {
				0: '正常',
				1: '净资产锁定',
				2: '净资产告警'
			}
		}
	},
	watch: {
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true,
			immediate: true
		},
		outlineInfo: {
			handler(newV) {},
			deep: true
		}
	},
	methods: {
		handleCurrentChange(val) {
			this.page = val
			if (this.parentData.userId !== null) {
				this.getProxyDetailRemark(this.parentData.userId)
			}
		},
		handleSizeChange(val) {
			this.page = 1
			this.size = val
			if (this.parentData.userId !== null) {
				this.getProxyDetailRemark(this.parentData.userId)
			}
		},
		closeFormDialog() {
			if (
				this.moduleBox !== this.$t('member.login_password_reset') &&
				this.moduleBox !== this.proxyInfoRpcPermission
			) {
				this.$refs.editForm.resetFields()
			}
			this.$refs.editForm.clearValidate()
			// setTimeout(() => {
			this.editVisible = false
			// }, 0);
		},
		setProxyDataInfoEdit(val) {
			this.$api
				.setProxyDataInfoEdit(val)
				.then((res) => {
					if (res?.code === 200) {
						const msg =
							(res.msg ||
								this.$t('agent.interface_exceptions')) ===
							'修改成功'
								? this.$t('common.modify_success')
								: res.msg ||
								  this.$t('agent.interface_exceptions')
						this.$message.success(msg)
						this.refresh()
						this.$refs.editForm.resetFields()
					}
					this.editVisible = false
				})
				.catch(() => {
					this.editVisible = false
				})
		},
		editFn(val) {
			this.moduleBox = val
			this.editData.remark = ''
			this.titel = this.$t('agent.remark_info') + '：'

			// 风控等级
			if (this.$t('common.risk_control_level') === val) {
				this.editData.windControlId =
					parseInt(this.outlineInfoList.windControlId) === 0
						? undefined
						: this.outlineInfoList.windControlId + ''
				for (let i = 0; i < this.riskLevelList.length; i++) {
					const ele = this.riskLevelList[i]
					if (this.editData.windControlId === ele.id) {
						this.editData.windControlName = ele.windControlLevelName
					}
				}
			}

			// 标签
			if (this.$t('agent.agent_label') === val) {
				this.editData.labelId =
					parseInt(this.outlineInfoList.labelId) === 0
						? undefined
						: this.outlineInfoList.labelId + ''
				for (let i = 0; i < this.memberLabelList.length; i++) {
					const ele = this.memberLabelList[i]
					if (this.editData.labelId === ele.id) {
						this.editData.labelName = ele.labelName
					}
				}
			}

			if (this.$t('agent.agent_label') === val) {
				this.editData.labelId =
					parseInt(this.outlineInfoList.labelId) === 0
						? undefined
						: this.outlineInfoList.labelId + ''
				for (let i = 0; i < this.memberLabelList.length; i++) {
					const ele = this.memberLabelList[i]
					if (this.editData.labelId === ele.id) {
						this.editData.labelName = ele.labelName
					}
				}
			}

			this.editVisible = true
		},

		submitEdit() {
			const params = this.editData
			const data = {}
			data.userName = this.parentData.userName
			data.merchantId = this.parentData.merchantId
			this.$refs.editForm.validate((valid) => {
				if (!valid) return
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				if (this.moduleBox === this.$t('common.risk_control_level')) {
					data.windControlAfter = {
						windControlId: params.windControlId,
						windControlName: params.windControlName,
						remark: params.remark
					}
					this.setProxyDataInfoEdit(data)
				}

				if (this.moduleBox === this.$t('agent.agent_label')) {
					data.labelAfter = {
						labelId: params.labelId,
						labelName: params.labelName,
						remark: params.remark
					}
					this.setProxyDataInfoEdit(data)
				}

				if (this.moduleBox === this.$t('agent.account_remark')) {
					data.remark = params.remark
					data.merchantId = this.parentData.merchantId
					data.userId = this.parentData.userId
					data.userName = this.parentData.userName
					this.setProxyDetailRemark(data)
				}
				loading.close()
			})
		},
		changeLabelId(val) {
			for (let i = 0; i < this.memberLabelList.length; i++) {
				const ele = this.memberLabelList[i]
				if (ele.id === val) {
					this.editData.labelName = ele.labelName
				}
			}
		},
		changeWindControlId(val) {
			this.editData.windControlId = val
			for (let i = 0; i < this.riskLevelList.length; i++) {
				const ele = this.riskLevelList[i]
				if (ele.id === val) {
					this.editData.windControlName = ele.windControlLevelName
				}
			}
		},
		refresh() {
			this.activeL = true
			const val = this.parentData
			this.getProxyDetailQueryDetail(val)
			this.initGetDics()
		},

		initGetDics() {
			const params = {}
			const merchantId = this.parentData.merchantId
			if (merchantId) {
				params.merchantId = merchantId
			}

			this.$api
				.getProxyLabelDict({ labelType: 1, ...params })
				.then((res) => {
					if (res?.code === 200) {
						this.memberLabelList = res.data || []
					}
				})

			this.$api
				.getSelectWindControlLevel({ windControlType: 2, ...params })
				.then((res) => {
					if (res?.code === 200) {
						this.riskLevelList = res.data || []

						const arr = this.riskLevelList.filter(
							(item) => item.id === this.editData.windControlId
						)
						if (arr.length === 0) {
							this.editData.windControlId = undefined
						}
					}
				})
		},
		// 会员详情-基本信息-概要信息以及个人资料
		getProxyDetailQueryDetail(val) {
			const merchantId = this.parentData.merchantId
			if (!merchantId) return
			this.$api
				.getProxyDetailQueryDetail({
					merchantId,
					userName: val.userName
				})
				.then((res) => {
					if (res?.code === 200) {
						this.outlineInfoList = res.data || {}
						// this.withdrawDialog.withdrawLimitType = this.outlineInfoList.withdrawLimitType
						// const newV = res.data || {}
						// if (newV.auditList && newV.auditList !== null) {
						// 	for (let i = 0; i < newV.auditList.length; i++) {
						// 		const ele = newV.auditList[i]
						// 		this.examineFlag.push(ele.applyType)
						// 	}
						// }
						const params = {
							userId: val.userId,
							pageNum: 1,
							pageSize: 100
						}
						this.$api.getProxyDetailRemark(params).then((res) => {
							if (res?.code === 200) {
								this.tableList = res.data?.record || []
								this.total = res.data?.totalRecord || 0

								this.remark = this.tableList[0].remark
							}
						})
					}
					this.activeL = false
				})
		},
		// 设置备注信息
		setProxyDetailRemark(data) {
			this.$api.setProxyDetailRemark(data).then((res) => {
				this.editVisible = false
				this.$message.success(this.$t('agent.remark_success'))
				this.remark = undefined
				this.page = 1
				this.size = 100

				if (res?.code === 200) {
					this.getProxyDetailRemark(this.parentData.id)
				}
			})
		},
		// 获取备注信息
		getProxyDetailRemark(val) {
			const params = {
				userId: val,
				pageNum: this.page,
				pageSize: this.size
			}
			this.$api.getProxyDetailRemark(params).then((res) => {
				if (res?.code === 200) {
					this.tableList = res.data?.record || []
					this.total = res.data?.totalRecord || 0

					if (
						this.remark === undefined &&
						this.tableList.length > 0
					) {
						this.remark = this.tableList[0].remark
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.backgroundTitelBox {
	width: 188px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.refrestBox {
	text-align: center;
	border-right: 1px solid #ccc;
	margin: 0 10px;
}
.titelBox {
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	position: relative;
}
.maxWidth {
	::v-deep .el-form-item__label {
		width: 140px !important;
	}
	::v-deep .el-form-item__content {
		margin-left: 140px !important;
	}
}

.btngroup button {
	height: 20px;
	line-height: 18px;
	padding: 0 5px;
	margin-left: 15px;
}
.msgList {
	margin-bottom: 10px;
	::v-deep .el-col {
		min-height: 24px;
	}
	strong {
		font-weight: normal;
	}
}
#basicInformation {
	font-size: 14px;
	padding-top: 10px;
	// padding-bottom: 40px;
}
</style>
